<template>
  <div :class="className" :style="{ height, width }" />
</template>

<script>
import echarts from "echarts";
// require('echarts/theme/macarons') // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // const option2 = {
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   legend: {
      //     left: 'center',
      //     bottom: '10',
      //     data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
      //   },
      //   series: [{
      //     name: 'WEEKLY WRITE ARTICLES',
      //     type: 'pie',
      //     roseType: 'radius',
      //     radius: [15, 95],
      //     center: ['50%', '38%'],
      //     data: [{
      //         value: 320,
      //         name: 'Industries'
      //       },
      //       {
      //         value: 240,
      //         name: 'Technology'
      //       },
      //       {
      //         value: 149,
      //         name: 'Forex'
      //       },
      //       {
      //         value: 100,
      //         name: 'Gold'
      //       },
      //       {
      //         value: 59,
      //         name: 'Forecasts'
      //       }
      //     ],
      //     animationEasing: 'cubicInOut',
      //     animationDuration: 2600
      //   }]
      // }

      this.chart.setOption(option);
    },
  },
};
</script>
